<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人注册</title>
    <link rel="icon" href="./images/picture.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/loginreg.css">
    <script src="./js/jquery.js"></script>
    <script src="./js/layer/layer.js"></script>
</head>

<body>
    <!-- header 头部 开始 -->
    <header>
        <div class="main logocon clearFix">
            <a href="./index.html" class="logo"></a>
            <div class="logotitle">欢迎注册</div>
            <div class="haveaccount">
                已有账号?
                <a href="./login.html" class="">请登录<i>&gt;</i></a>
            </div>
        </div>
    </header>
    <!-- header 头部 结束 -->

    <!-- banner 开始 -->
    <section>
        <article class="container">
            <div class="main reg">
                <div class="regmain">
                    <form>
                        <div class="regbox">
                            <label for="">
                                用户名:
                            </label>
                            <div class="inputbox">
                                <input type="text" name="uname">
                            </div>
                        </div>
                        <div class="regbox">
                            <label for="">
                                密码:
                            </label>
                            <div class="inputbox">
                                <input type="text" name="upwd">
                            </div>
                        </div>
                        <div class="regbox">
                            <label for="">
                                昵称:
                            </label>
                            <div class="inputbox">
                                <input type="text" name="nickname">
                            </div>
                        </div>
                        <div class="regbox">
                            <label for="">
                                性别:
                            </label>
                            <div class="radiobox">
                                <input type="radio" name="sex" value="男" checked>男
                                <input type="radio" name="sex" value="女">女
                            </div>
                        </div>
                        <div class="regbox pos-r">
                            <label for="">
                                验证码:
                            </label>
                            <div class="inputbox">
                                <input type="text" id="codeYzm">
                            </div>
                            <div class="code pos-a">
                                <a id="yzm"></a>
                            </div>
                        </div>
                        <div class="btnbox">
                            <div class="btn">
                                <button class="regbtn">注册</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </article>
    </section>
    <!-- banner 结束 -->

    <!-- 内容 开始 -->
    <section>

    </section>
    <!-- 内容 结束 -->

    <!-- footer 底部 开始 -->
    <footer>

    </footer>
    <!-- footer 底部 结束 -->
</body>
<script>
    $('#yzm').on("click", function () {
        $("#codeYzm").val("");
        $.ajax({
            url: "/api/yzm",
        }).then(function (res) {
            $("#yzm").html(res.data);
            $("#yzm").attr('data-yzm', res.text);
        })
    })
    $('#yzm').triggerHandler("click");

    $(function () {
        $("form").on("submit", function () {
            //1.获取输入的验证码,
            var yzmCode = $("#codeYzm").val().toLowerCase();
            //2.得到生成的验证码,进行比较 如果相等,
            var validateYZM = $('#yzm').attr("data-yzm").toLowerCase();
            //3. 接下来.可以提交了
            if (yzmCode != validateYZM) {
                layer.msg("验证码错误!");
                setTimeout(function () {
                    $('#yzm').triggerHandler("click")
                }, 400);

                return false;
            }

            let data = $("form").serialize();

            $.ajax({
                url: "./api/reg",
                type: "post",
                data: data
            }).then(function (res) {
                console.log(res);
                layer.msg(res.message);
            })
            return false;
        })
    })
</script>

</html>